<!--
 * @Author: jhw
 * @Date: 2025-08-07 00:12:23
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-15 10:35:41
 * @Description:
-->
<template>
  <div class="left-side-container flex">
    <div class="tabs">
      <!-- 基础组件 -->
      <div
        class="tab-item"
        :class="{
          'tab-show': routeName === 'base-component',
        }"
        @click="switchEditor"
      >
        <el-icon><Memo /></el-icon>
        <span class="tab-item-title mt-5px">基础组件</span>
      </div>
      <!-- 增强组件 -->
      <div
        class="tab-item"
        :class="{
          'tab-show': routeName === 'enhance-component',
        }"
        @click="switchOutline"
      >
        <el-icon><Document /></el-icon>
        <span class="tab-item-title mt-5px">大纲</span>
      </div>
    </div>
    <RouterView class="tab-pane" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { Document, Memo } from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const routeName = computed(() => route.name);
const router = useRouter();

const switchEditor = () => {
  router.push({
    name: 'base-component',
    query: {
      ...route.query,
    },
  });
};

const switchOutline = () => {
  router.push({
    name: 'enhance-component',
    query: {
      ...route.query,
    },
  });
};
</script>

<style scoped lang="scss">
.left-side-container {
  @apply w-310px fixed left-20px top-70px;
  height: calc(100vh - 50px - 40px);
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  > .tabs {
    @apply w-1/5 h-full;
    border-right: 1px solid var(--border-color);
    > .tab-item {
      @apply w-full h-100px flex items-center justify-center flex-col no-underline cursor-pointer;
      color: var(--font-color-light);
      > .tab-item-title {
        font-size: var(--font-size-base);
      }
    }
    > .tab-show {
      color: var(--primary-color);
    }
  }
  > .tab-pane {
    @apply w-4/5 h-full overflow-y-scroll p-16px;
  }
}
</style>
